<template>
	<view class="cart_box" v-if="buffer">
		<view class="cart_head">
			<view class="cart_menu">
				<text>全部(20)</text>
				<text>降价(4)</text>
				<text>常卖(2)</text>
				<text>分类</text>
			</view>
			<view class="cart_ticket">
				<!-- 此处使用checkbox是因为支付宝switch没有checkbox类型 -->
				<!-- <switch type="checkbox" :checked="true" color="#ff6040"  /> -->
				<checkbox  color="#FF6040" value="true"  />
				<text class="cart_ticket_text1">小U自营</text>
				<text class="cart_ticket_text2">以免运费 |</text>
				<text class="cart_ticket_text3">领券</text>
			</view>
		</view>
		
		<view class="container" >	
			<view class="top">
				<scroll-view 
					class="scroll-view_H" 
					scroll-x="true" 
					scroll-left="0" 
					v-for="(item,index) in cartList"
					:key="index"
				>
					<view class="cartInfo" id="demo1">
						<!-- 明日来写购物车基本信息 -->
						<view class="cartInfochild">
							<!-- 选择框 -->
							<view class="cartInfo_switch common">
								<!-- 点击当前商品 -->
								<checkbox-group @change="check(index)">
									<checkbox
										color="#FF6040" 
										:checked="item.status==1?true:false"
										value="1"
									/>
								</checkbox-group>
								
								<!-- <switch type="checkbox" :checked="true"  color="#ff6040" /> -->
							</view>
							<!-- 图片 -->
							<view class="cartInfo_image common">
								<image :src="item.img" mode="widthFix"></image>
							</view>
		
							<!-- 信息 -->
							<view class="cartInfo_info">
								<label style="font-size: 32rpx;">{{item.goodsname}}</label>
								<label style="font-size: 24rpx; color: #ccc;">规格：不错的商品</label>
								<label style="font-size: 20rpx; color: #FF6040;">比加入降低￥100</label>
								<label style="color:#FF6040;">￥
									<text style="font-size: 40rpx;color:#FF6040;">{{item.price}}
									</text> <text>￥{{item.price}}</text>
								</label>
							</view>
							<!-- 加减数量 -->
							<view class="cartInfo_num">
								<view class="cartInfo_num_child">
									<label @click="minus(index)">－</label>
									<label >{{item.num}}</label>
									<label @click="add(index)">＋</label>
								</view>
							</view>
						</view>
		
					</view>
					<view class="cartDel" id="demo2"  @click="del(index)">
						<label for="" >删除</label>
					</view>
				</scroll-view>
			</view>
			
			<!-- 底部 -->
			<view class="foot">
				<view class="footd1">
					<checkbox-group  @change="changeAll($event)">
						<checkbox  color="#FF6040" value="1"  :checked="allCheckd"  />
					</checkbox-group>
					<!-- <switch type="checkbox" :checked="true" color="#ff6040" /> -->
					<label>全选</label>
				</view>
				<view class="footd2">
					<view class="footd2sp1">合计：<label style="color: #FF6040;">￥ {{allPrice}}</label></view>
					<label class="footd2sp2">不含运费，已优惠￥0.00</label>
				</view>
				<!-- 跳到提交订单，结算页面 -->
				<view class="footd3" hover-class="touchOpacity" @click="goOder">
					<!-- 被选中的商品的个数 -->
					<label>去结算( {{allNum}} 件)</label>
				</view>
			</view>
		
		</view>
	</view>
	<!-- 无数据提示 -->
	<view v-else>
		<cartnull />
	</view>
	
</template>

<script>
      // api 
	  import {cartlist,cartedit,cartdelete} from '@/api/api.js'
	  
	  
	  
	// 引入数据为空提示组件
	import cartnull from '@/components/cartnull/cartnull.vue'
	export default {
		components:{cartnull},
		data() {
			return {
				cartList:[
				
				],//初始化购物车数据
				buffer: true, //检测购物车是否有数据
				islogin:false,
				flag : true
			}
		},
		// 页面显示时
	async	onShow() {
			this.goodsList()

	
		},
		methods:{
			//单选
			check(index){
				this.cartList[index].status = !this.cartList[index].status
			},
			
			
			// 获取用户的购物车数据
			goodsList(){			
			 const uid = uni.getStorageSync('userinof').uid
				cartlist({uid:uid}).then(res=>{
					if(res.data.code==200){
						if(res.data.list==null){
							this.buffer = false
							return 
						}
						
					}
						this.buffer = true
					res.data.list.forEach(item=>{
						
						item.img = this.$basUrl + item.img 
						item.status =  item.status==true?1:0
					})
					
				this.cartList = res.data.list
				console.log(res.data.list);
				})
			},
			
			minus(index,id){
			this.cartList[index].num--
			if(this.cartList[index].num<=1){
			this.cartList[index].num = 1			
			return false	
			}
			cartedit({type:1,id:this.cartList[index].id}).then(res=>{
				console.log(res);
			})
			
			},
			add(index){
				this.cartList[index].num++
			
				cartedit({type:2,id:this.cartList[index].id}).then(res=>{
					console.log(res);
				})
			},
			
			// 全选
			changeAll(e){
			let tag =   e.detail.value.length>0?true:false
			this.cartList.map((item=>{
				item.status = tag
				
				
			}))	
				
			},
			// 删除 
			del(index){
			uni.showModal({
				title:'提醒',
				content:"是否删除",
				success: (res=>{
					if(res.confirm){
					cartdelete({id:this.cartList[index].id}).then(item=>{
						if(item.data.code ===200){
							uni.showToast({
								title:"删除成功",
								icon:"success"
							})
						  this.cartList.splice(index, 1)
							
						}else{
						uni.showToast({
							title:"请重新登录",
							icon:"error"
						})	
							
						setTimeout(()=>{
						uni.navigateTo({
							url:"/pages/textlogin/textlogin"
						})
							
							
						},2000)	
							
						}
						
						
						
						
						
						
						
					})
					}
				})
			})
			}	,
		
			goOder(){
			let carts = this.cartList.filter(item=>{
				return item.status==true
			})
			if(carts.length>0){
			uni.setStorageSync('carts',{carts:carts,allPrice:this.allPrice,allNum:this.allNum})	
			uni.navigateTo({
				url:'/pages/order/order'
			})
				
				
			}else{
				uni.showToast({
					title:'至少选择一件商品',
					icon:'none'
				})
				
				
			}
			
			
			
			}
			
		},
		computed:{
		allCheckd(){
			let isChecked = this.cartList.every(item=>{
				return item.status ==true?1:0
			})
			return isChecked
		},
		// 计算总价格
		allPrice() {
			let total = 0 
			this.cartList.forEach(item=>{
				if(item.status){
					total+=item.num*item.price
					
				}
			})
		return 	 total.toFixed(2)
		},
		allNum() {
			let total = 0 
			this.cartList.forEach(item=>{
				if(item.status){
					total+=item.num
					
				}
			})
		return 	 total
		}
		},
		watch:{
			"cartList":{
			handler(val){
			if(val.length==0){
				this.buffer = false
				console.log(this.buffer);
			}
			}	
			}
		}
		
}
</script>

<style scoped>
	/* 引入样式文件 */
	@import url("@/static/css/cart.css");
</style>
